<script>
import {handleError, handleSuccess} from "@/util/request";

export default {
  name: "ProviderPage",
  data() {
    return {
      // ********************需要后端返回给前端***************************
      // 表格绑定的数据 (后端查询返回的page对象中的records, 后端select *查出来的数据)
      tableData: [],
      // 查询到的总行数 (后端查询返回的page对象中的total, 后端select count(*)查出来的值)
      total: 0,
      // 查询到的总页数 (后端根据total和size算出来一个值)
      pages: 0,
      // ********************前端发给后端的***************************
      // 查询参数: 物资名称 (绑定输入框, 让用户输入, 发给后端)
      providerName: null,
      // 查询参数: 最低库存 (绑定输入框, 让用户输入, 发给后端)
      licenseNumber: null,

      contactPerson: null,

      current: 1,
      // 分页参数: 显示的行数 (默认为10, 绑定分页器, 让用户选择, 发给后端)
      size: 10,
      // ********************前端自己的变量,与http请求无关***************************
      // 行数值的数组 (绑定给分页器的下拉框)
      sizes:[5, 10, 20, 50, 100],
      // 控制出入库模态框展示的开关
      dialogVisible: false,
      // 绑定出入库表单记录对象
      record: {},
      rules: {
        type: [
          { required: true, message: '请选择操作类型', trigger: 'blur' }
        ],
        quantity: [
          { required: true, message: '请输入数量', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    getPageData () {
      let page = {
        current: this.current,
        size: this.size,
        providerName: this.providerName,
        licenseNumber: this.licenseNumber,
        contactPhone: this.contactPerson
      }
      this.$http.get('/provider/page', {params:page})
          .then((result)=> {
            const page = handleSuccess(result)
            if (page) {
              this.tableData = page.records
              this.total = page.total
              this.pages = page.pages
            }
          })
          .catch((error)=> {
            handleError(error)
          })
    },
    handleSizeChange(size) {
      this.size = size
      this.getPageData()
    },
    handleCurrentChange(current) {
      this.current = current
      this.getPageData()
    },
    handleSearch() {
      this.current = 1
      this.size = 10;
      this.getPageData()
    },
    reset() {
      this.providerName = null
      this.licenseNumber = null
      this.contactPerson = null
      this.current = 1
      this.size = 10
      this.getPageData()
    },
    handleDisable(id, status) {
      // 弹出确认框
      let message = status == 0 ? '确定要启用这个供应商吗':'确定要禁用这个供应商吗'
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post('/provider/disable', {id, status}).then((result) => {
          if (handleSuccess(result)) {
            this.getPageData()
          }
        })
            .catch((error) => {
              handleError(error)
            })
      }).catch(() => {});
    },
    handleDelete(id) {
      let message = '确定要删除这个供应商吗'
      this.$confirm(message,'提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(()=>{
        this.$http.post('/provider/delete',{id}).then((result)=>{
          if(handleSuccess(result)){
            this.getPageData()
          }
        })
            .catch((error)=>{
              handleError(error)
            })
      }).catch(()=>{});
    }
  },
  mounted() {
    this.getPageData()
  }
}
</script>

<template>
  <!-- el-card是卡片的父容器 -->
  <el-card class="box-card">
    <!-- 卡片标题 -->
    <div slot="header" class="clearfix">
      <span>供应商列表</span>
      <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
    </div>
    <!-- 卡片内容区域1: 放一组横排的form表单, 给用户输入查询条件 -->
    <el-form class="el-form--inline" label-position="left">
      <el-form-item label="供应商名称">
        <el-input placeholder="(支持模糊查询)" v-model="providerName"/>
      </el-form-item>
      <el-form-item label="营业执照号码">
        <el-input placeholder="(支持模糊查询)" v-model="licenseNumber"/>
      </el-form-item>
      <el-form-item label="联系人">
        <el-input placeholder="(支持模糊查询)" v-model="contactPerson"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 卡片内容区域2: 这里放表格, 展示本次数据 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="供应商ID" width="100"/>
      <el-table-column prop="name" label="供应商名称" width="180"/>
      <el-table-column prop="licenseNumber" label="营业执照号码" width="250"/>
      <el-table-column prop="contactPerson" label="联系人" width="100"/>
      <el-table-column label="状态" width="150">
        <template v-slot="scope">
          <el-tag v-if="scope.row.status==0" type="info">启用中</el-tag>
          <el-tag v-if="scope.row.status==1" type="info">禁用中</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button type="warning" plain size="mini" v-if="scope.row.status==0" @click="handleDisable(scope.row.id, 1)">禁用</el-button>
          <el-button type="success" plain size="mini" v-if="scope.row.status==1" @click="handleDisable(scope.row.id, 0)">启用</el-button>
        </template>
      </el-table-column>
      <el-table-column label=删除>
        <template v-slot="scope">
          <!-- 删除按钮 -->
          <el-button type="danger" plain size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 卡片底部: 这里分页器 -->
    <el-row class="card-footer" style="margin-top: 10px">
      <el-col>
        <el-pagination
            layout="sizes,prev,pager,next,jumper,total"
            :total="total"
            background
            :current-page="current"
            :page-size="size"
            :page-sizes="sizes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>
      </el-col>
    </el-row>
  </el-card>
</template>

<style scoped>

</style>